{extend name="public/base" /} {block name="style"}
<link href="__CSS__/cash.css" rel="stylesheet">
<style>
	.s_active {
		background-color: #0D8DDB;
		color: #fff;
		font-size: 14px;
	}
	
	.m_input {
		width: 50px!important;
		text-align: center;
		height: 30px;
		border: 1px solid #EEE;
		-webkit-border-radius: 0!important;
		-moz-border-radius: 0!important;
		border-radius: 0!important;
		line-height: 28px!important;
	}
	
	.sk_table tr td {
		border: 1px #e7eaec solid;
		height: 40px;
		line-height: 40px;
		text-align: center;
	}
	#jici_info tr th{
		background-color: #fff;
		text-align: left;
	}
	.table tr th{
		background-color: #fff;
		text-align: left;
	}
</style>
{/block} {block name="body"}
<div class=" gray-bg" data-scroll="y" data-scroll-destroy="true" id="container" scroll="true">
	<div id="gd_box" class="ibox-content" style="width:47%;height:500px;float: left;margin-top: 20px;margin-left: 20px;">
		<div class="  animated fadeInRight">
			<div class="input-group m-b">
				<input type="text" id="key" name="key" class="form-control" placeholder="搜索会员卡号/手机号/姓名">
				<span class="input-group-addon" onclick="search_emp()"> <img src="__IMG__/search.png" /></span>
			</div>
			<div  id="member_info" style="display: none;" >
			<p><span class="m_rs_pan ">会员卡号:</span><span id="no"></span><span class="card_type"></span></p>
			<p><span class="m_rs_pan ">姓名:<span id="name"></span></span>
			   <span class="m_rs_pan r1">手机号:<span id="mobile"></span></span>
			   <span class="m_rs_pan r1">余额:<span id="money"></span></span>
			    <span class="m_rs_pan r1">积分:<span id="score"></span></span>
			</p>
  			</div>
			<div id="jici_info" style="display: none;">
				<table class="table  table-hover tcash" style="margin-bottom: 0;border-bottom: none;">
					<thead>
					<tr class=" text-center">
						<th>服务项目</th>
						<th>剩余次数</th>
						<th>消费次数</th>
						<th>本次消费</th>
					</tr>
				</thead>
				</table>
				<div style="overflow-y: scroll;height: 400px;">
					<table class="table table-hover">
					<tbody id="jici_list" class=" text-left">
						
					</tbody>
					</table>
				</div>
			</div>
			<div id="no_detail" style="vertical-align: middle;height:100%;">
			<div class="middle-box text-center animated fadeInDown">
	        <h2>未选择会员</h2>
	        <div class="error-desc">
	        		<p>  请在上方输入会员信息~</p>
	        </div>
   			</div>
		</div>
		</div>
	</div>
		<div id="pk_box" class="ibox-content" style="position:relative;width:47%;height:500px;display:inline-block;margin-top: 20px;margin-left: 20px;">
			<div class="  animated fadeInRight">
				<div class="input-group m-b" style="width:100%;text-align: center;">
	               <span style="font-size: 24px;float: left;">计次消费列表</span>
	            </div>
	  			</div>
	  			<table class="table  table-hover " style="margin-bottom: 0;border-bottom: none;">
					 <thead>
	                    <tr class="text-left">
	                        <th>名称</th>
	                        <th >数量</th>
	                        <th>操作</th>
	                    </tr>
	                </thead>
				</table>
				<div style="overflow-y: scroll;height: 400px;">
		            <table class="table table-hover">
		                <tbody id="jc_cart" class=" text-left">
		                	
		                </tbody>
		            </table>
	           </div>
	    	<div class="row" style="width:100%;position: absolute;bottom: 10px;">
			    <button class="btn btn-primary p-btn" style="background-color: #CA4440;width:49%" type="button" onclick="sk()">收款</button>
			    <button class="btn btn-white p-btn" style="width:49%" type="button" onclick="reset_jc()">清空</button>
			</div>           
		</div>
  		<input type="hidden" name="line_member_id" id="line_member_id" />
</div>
	{/block} {block name="script"}
	<script>
		var cartlist = {};
		function reset_jc(){
			cartlist = {};
			$("#jici_list").html("");
			$("#jc_cart").html("");
			$("#jici_info").hide();
			$("#no_detail").show();
			$("#key").val("");
			$("#member_info").hide();
		}
		function sk() {
			var html=$("#jc_cart").html().trim();
			if(html==""){
				layer.msg("请选择消费商品!");
				return ;
			}
			var html='<div class="row" >'+
						'<div style="float: left;width:50%;text-align: center;">'+
							'<p>消费明细</p>';
							for(var i in cartlist){
								var jc=cartlist[i];
								var sy=jc['total_num']-jc['num'];
								html+='<p>'+jc['name']+jc['num']+'次,剩余'+sy+'次</p>';
							}
				   html+='<p>会员卡号:'+$("#no").text()+'</p><p>手机号:'+$("#mobile").text()+'</p></div></div>';
					var index=layer.open({
					  title: '确认扣次',
					  zIndex :1999,
				 	  area: ['450px', '250px'] ,
					  content: html,
					  btn: ['确定','取消'],
					  yes: function(index, layero){
					    //按钮【按钮一】的回调
					    	$.ajax({
								url:'kouci',
								data:{data:cartlist,line_member_id:$("input[name='line_member_id']").val()},
								type:"post",
								success: function(data) {
									layer.close(index);
									reset_jc();
									callback(data);
								}
							})
					  },btn2:function(index,layero){
					  	layer.close(index);
					  }
					});
			console.log(cartlist);
		}
			function callback(data){
		if(data.code==200){
			var info=data.data;
			 var html='<div>'+
					'<div style="text-align: center;">'+
					'<i class="fa fa-check" style="color: #35b12c;font-size: 60px;font-weight: 600;"></i>'+
					'<p><span class="b_rs_pan">扣次成功</span> </p>'+
					'</div>'+
					'<div  style="text-align: center;"><span >会员卡号</span><span style="margin-left: 50px;">'+$("#no").text()+'</span></div>'+
					'<div  style="text-align: center;"><span >手机号</span><span style="margin-left: 50px;">'+$("#mobile").text()+'</span></div>'+
					'<div  style="text-align: center;"><span >单号</span><span style="margin-left: 50px;">'+info.log_no+'</span></div>'+
					'<div  style="text-align: center;"><span >交易时间</span><span style="margin-left: 50px;">'+info.time+'</span></div>'+
					'<div  style="text-align: center;"><span >门店</span><span style="margin-left: 50px;">'+info.store_name+'</span></div>'+
					'<div  style="text-align: center;"><span >操作员</span><span style="margin-left: 50px;">'+info.skr+'</span></div>'+
				 '</div>';
				  var index=layer.open({
				  title: '扣次成功',
				  zIndex :1999,
			 	  area: ['600px', '350px'] ,
				  content: html,
				  btn: ['我知道了','打印小票']
				  ,yes: function(index, layero){
				    layer.close(index);
				  },btn2:function(index,layero){
				  	layer.msg("打印成功");
			    	
				  }
			});
			
		}else{
			layer.msg(data.msg);
			window.reload();
		}
	}
		$("#key").autocomplete({
		url:'get_emps',
		data:{key:$("#key").val()},
		css:{
			'width':'88%',
			'border':'0',
		},
		postname:'id'
		});
		function select_jici(obj) {
			var id = $(obj).attr("data-id");
			var name = $(obj).attr("data-name");
			var total_num=parseFloat($(obj).attr("data-num"));
			var arr={};
			var cart=cartlist[id];
			var xf_num=parseFloat($("#xfnum"+id).text());
			if(xf_num >=total_num){
				layer.msg('超出消费次数！');
				return false;
			}
			$("#xfnum"+id).text(xf_num+1);
			if(cart!=null){
				cartlist[id]['num']=cartlist[id]['num']+1;
			}else{
				arr['name']=name;
				arr['total_num']=total_num;
				arr['num']=1;
				arr['id']=id;
				cartlist[id]=arr;
			}
			var html = '<tr>' +
				'<td>' + name +  '</td>' +
				'<td><input data-name='+id+' class="m_input" type="text" value=1 /></td>' +
				 '<td data-name='+id+' style="font-size:16px;">&nbsp;&nbsp;<span class="del_pan" data-name='+id+' >删</span></td>'+
				'</tr>';
				$("#jc_cart").append(html);
				setEvent();
		}
		function setEvent(){
	  		$("#jc_cart .m_input").change(function(){
	  			change_jc(this);
	  		})
	  		$("#jc_cart .del_pan").click(function(){
	  			del_jc(this);
	  		})
  		}
	/**
	 * 删除
	 */
	function del_jc(obj){
		var con=layer.confirm('确定删除?', function(index){
			var ckey=$(obj).data("name");
			delete(cartlist[ckey]);
			$(obj).parent().parent().remove();
			layer.close(con);
		});
	}
	/**
	 * 改变商品数量
	 */
	function change_jc(obj){
		var ckey=$(obj).data("name");
		var total_num=cartlist[ckey]['total_num'];
		var val=$(obj).val();
		var num=cartlist[ckey]['num'];
		if((val)>total_num){
			layer.msg("消费次数大于剩余次数");
			return ;
		}
		cartlist[ckey]['num']=num;
	}
	
		function search_emp() {
			var v=$("#key").val();
			if(v.trim()==""){
				layer.msg("请输入会员关键字!");
			}
		}

		function call_back(msg) {
			layer.msg(msg);
			layer.closeAll('iframe');
		}
		//顶部导航
		//ajax表单提交
		$("#myForm").submit(function() {
			ajaxForm();
			return false;
		});
	</script>
	{/block}